<template>
    <div class="importFiles-view">
        <el-dialog :title="titleText" :visible.sync="dialogFormVisible" width="10%" :show-close="showimg"  :close-on-click-modal="showimg">
            <div>
                <div class="importFiles-view-text">导入说明：请先下载模板，根据模板内容上传，文件必须为xlsx格式，导入后需手动提交审核。</div>
                <div class="importFiles-view-botton1" @click="downloadUser">下载模板</div>
                <div class="importFiles-view-text" >上传文件：</div>
                <!--<div class="importFiles-view-botton">上传文件</div>-->
                <el-upload
                        class="upload-demo"
                        :action="importFileUrlInfo"
                        :headers="headersMsg"
                        :on-success="importFileUrlSuccess"
                        :on-error="importFileUrlError"
                        accept=".xlsx"
                        :file-list="fileList"
                        :limit="1">
                    <el-button size="small" class="importFiles-view-botton"  type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过500kb</div>
                </el-upload>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-button"  @click="closeForm" >取 消</el-button>
                <el-button class="sure-button" type="primary" @click="closeForm">批量导入</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "importHouse",
        data(){
            return{
                titleText:"",
                showimg:false,
                fileList: [],
                importFileUrlInfo:"https://sit.zooming-data.com/dist-admin/api/dist_editAllNewHouse",
                headersMsg:{
                    authorization:this.$store.getters.userData.token,
                },
            }
        },
        props:{
            dialogFormVisible: {
                type: Boolean
            },
            importHouseType:{
                type: Number
            },
        },
        watch:{
            importHouseType:{
                handler(newValue, oldValue) {
                    if(newValue==1){
                    this.titleText="批量编辑楼盘"
                    }else {
                        this.titleText="批量导出楼盘"
                    }
                }
            },
        },
        methods: {
            closeForm(){
                this.$emit("close");
            },
            //下载按钮
            downloadUser(){
                window.open('http://static-1251474741.file.myqcloud.com/excel/dist/批量导入用户模板.xlsx')
            },
            importFileUrlSuccess(response, file, fileList){

            },
            importFileUrlError(err, file, fileList){
                    console.log(err,"上传失败")
                this.$message.error('图片上传失败');
            },
        }
    }
</script>
<style>
    .importFiles-view .el-dialog--small {
        width:517px;
    }
    .importFiles-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .importFiles-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .importFiles-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
    .importFiles-view .el-form-item__content{
        /*margin-right:100px;*/
        margin-left: 0px !important;
        width: 100%;
    }
    .importFiles-view  .el-form-item{
        margin-bottom:0px
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.importFiles-view-text{
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,1);
    margin-bottom: 10px;
}
.importFiles-view-botton{
    width:88px;
    text-align: center;
    height:32px;
    background:rgba(16,165,22,1);
    border-radius:4px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-bottom: 24px;
}
.importFiles-view-botton1{
    width:88px;
    text-align: center;
    height:32px;
    line-height:32px;
    background:rgba(16,165,22,1);
    border-radius:4px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-bottom: 24px;
    cursor: pointer;
}
</style>